<template>
   <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="5">
        <el-card class="box-card" v-for="(item,index) in pckList" :key="index">
           <div slot="header" class="clearfix">
             <span>{{ item.name }}</span>
             <el-button style="float: right; padding: 3px 0" type="text" @click="buies(item.id)">购买</el-button>
           </div>
           <div>
               <p>套餐价格：￥{{ item.price }}/{{ item.timenum }}{{ item.timeunit }}</p>
               <p>套餐功能：</p>
               <ul>
                   <li v-for="(p,index) in item.perms" :key="index">{{ p.permName }}</li>
               </ul>
           </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="支付二维码" :visible.sync="dialogVisible" width="30%" >
      <div ref="qrcode" style="padding-left: 15%;"></div>
  <span slot="footer" class="dialog-footer">
    <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import {findAll} from '@/api/pck'

import {buy,paies}from '@/api/pay'
import QRCode from 'qrcodejs2-fix'

export default {
  name: 'Dashboard',
  data(){
    return{
      pckList:[],
      dialogVisible:false
    }
  },
  methods:{
    search(){
      findAll().then(res=>{
        this.pckList=res.data
      })
    },
    buies(id){
      buy(id).then(res=>{
        if(res.ok){
          //获取订单Id
          var orderId=res.data
          //发送支付请求，获取支付连接
          paies(orderId).then(res=>{
            if(res.ok){
              console.log(res.data);
              this.dialogVisible=true;
              this.$nextTick(()=>{
                //生成二维码               
                new QRCode(this.$refs.qrcode, {
                  text: res.data,   //URL地址
                  width: 300,
                  height: 300,
                  colorDark: '#000',    //二维码颜色
                  colorLight: "#ffffff"  //背景颜色
                });       
              });       
            }else{
              this.$message.error(res.message)
            }
          })
        }else{
          this.$message.error(res.message)
        }
        
      })
    }
  },
  created() {
    this.search()
  },
  computed: {
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
